<template>
  <view class="calculator-container">
    <!-- 计算表单区域 -->
    <view class="calculator-form">
      <view class="form-row">
        <text class="label">广告消耗</text>
        <input 
          type="digit" 
          v-model="form.adCost" 
          placeholder="元"
          @input="handleInput($event, 'adCost')"
        />
		 <text class="unit">元</text>
      </view>
      <view class="form-row">
        <text class="label">成交金额</text>
        <input 
          type="digit" 
          v-model="form.dealAmount" 
          placeholder="元"
          @input="handleInput($event, 'dealAmount')"
        />
		<text class="unit">元</text>
      </view>
      <view class="form-row">
        <text class="label">佣金率</text>
        <input 
          type="digit" 
          v-model="form.commissionRate" 
          placeholder="%"
          @input="handleInput($event, 'commissionRate')"
        />
		<text class="unit">%</text>
      </view>
      <view class="form-row">
        <text class="label">退货率</text>
        <input 
          type="digit" 
          v-model="form.returnRate" 
          placeholder="%"
          @input="handleInput($event, 'returnRate')"
        />
		<text class="unit">%</text>
      </view>
      <view class="form-row">
        <text class="label">平台费率</text>
        <input 
          type="digit" 
          v-model="form.platformFee" 
          placeholder="%"
          @input="handleInput($event, 'platformFee')"
        />
		<text class="unit">%</text>
      </view>
    </view>

    <!-- 按钮区域 -->
    <view class="button-group">
      <button class="btn reset" @tap="handleReset">重置</button>
      <button class="btn calculate" @tap="handleCalculate">计算</button>
    </view>

    <!-- 计算结果区域 -->
    <view class="result-area" v-if="showResult">
      <view class="result-title">计算结果</view>
      
      <view class="result-row">
        <view class="result-item">
          <text>利润金额：</text>
          <text class="value">{{result.profit}}元</text>
        </view>
        <view class="result-item">
          <text>支付ROI：</text>
          <text class="value">{{result.paymentROI}}</text>
        </view>
      </view>

      <view class="calculation-time">
        计算时间：{{result.calculationTime}}
      </view>
      <view class="calculation-note">
        PS：商家在ROI商家版计算佣金率，商家平台费按实际填写(如：5%)
      </view>
	  <button class="copy-result" style="background-color: #ff6b00; color: #FFF;" @tap="copyResult">复制结果</button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'AdvertisingCalculator',
  data() {
    return {
      form: {
        adCost: '',
        dealAmount: '',
        commissionRate: '',
        returnRate: '5',
        platformFee: '10'
      },
      showResult: false,
      result: {
        profit: '0.00',
        paymentROI: '0.00',
        calculationTime: ''
      }
    }
  },
  methods: {
    handleReset() {
      this.form = {
        adCost: '',
        dealAmount: '',
        commissionRate: '',
        returnRate: '5',
        platformFee: '10'
      }
      this.showResult = false
    },

    handleCalculate() {
      if (!this.validateInput()) {
        return
      }

      const adCost = parseFloat(this.form.adCost)
      const dealAmount = parseFloat(this.form.dealAmount)
      const commissionRate = parseFloat(this.form.commissionRate) / 100
      const returnRate = parseFloat(this.form.returnRate) / 100
      const platformFee = parseFloat(this.form.platformFee) / 100

      // 计算逻辑
      const estimatedSettlement = dealAmount * commissionRate * (1 - returnRate - platformFee)  // 结算预估金额
      const profit = estimatedSettlement - adCost  // 利润金额
      const paymentROI = dealAmount / adCost  // 支付ROI

      this.result = {
        profit: this.formatNumber(profit),
        paymentROI: this.formatNumber(paymentROI),
        calculationTime: this.getCurrentTime()
      }

      this.showResult = true
    },

    validateInput() {
      const isValidNumber = (value) => {
        const num = parseFloat(value)
        return !isNaN(num) && num >= 0 && value.trim() !== ''
      }

      if (!isValidNumber(this.form.adCost)) {
        uni.showToast({ title: '请输入有效的广告消耗', icon: 'none' })
        return false
      }
      if (!isValidNumber(this.form.dealAmount)) {
        uni.showToast({ title: '请输入有效的成交金额', icon: 'none' })
        return false
      }
      if (!isValidNumber(this.form.commissionRate)) {
        uni.showToast({ title: '请输入有效的佣金率', icon: 'none' })
        return false
      }
      if (!isValidNumber(this.form.returnRate)) {
        uni.showToast({ title: '请输入有效的退货率', icon: 'none' })
        return false
      }
      if (!isValidNumber(this.form.platformFee)) {
        uni.showToast({ title: '请输入有效的平台费', icon: 'none' })
        return false
      }

      // 检查费率总和
      const totalRate = parseFloat(this.form.returnRate) + parseFloat(this.form.platformFee)
      if (totalRate >= 100) {
        uni.showToast({ title: '费率总和不能超过100%', icon: 'none' })
        return false
      }

      // 检查佣金率
      if (parseFloat(this.form.commissionRate) >= 100) {
        uni.showToast({ title: '佣金率不能超过100%', icon: 'none' })
        return false
      }

      return true
    },

    formatNumber(num) {
      return Number(num).toFixed(2)
    },

    getCurrentTime() {
      return new Date().toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false
      })
    },
	copyResult() {
	      const resultText = `利润金额: ${this.result.profit}元\n` +
	`支付ROI: ${this.result.paymentROI}元\n` +
	`计算时间: ${this.result.calculationTime}\n` +
	
	`PS: 商家在ROI商家版计算佣金率，商家平台费按实际填写(如：5%)。\n\n\n` +
	`本结果由"电商计算器"小程序生成，微信搜索"电商计算器"即可免费使用。`
	
	      uni.setClipboardData({
	        data: resultText,
	        success: () => {
	          uni.showToast({ title: '复制成功', icon: 'success' })
	        }
	      })
	    },
	

    handleInput(event, field) {
      let value = event.detail.value
      
      // 移除非数字和小数点
      value = value.replace(/[^\d.]/g, '')
      
      // 确保只有一个小数点
      const parts = value.split('.')
      if (parts.length > 2) {
        value = parts[0] + '.' + parts.slice(1).join('')
      }
      
      // 限制小数位数为2位
      if (parts.length === 2 && parts[1].length > 2) {
        value = parts[0] + '.' + parts[1].slice(0, 2)
      }
      
      this.form[field] = value
    }
  }
}
</script>

<style>
.calculator-container {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
}

.calculator-form {
  margin-bottom: 30rpx;
}

.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.label {
  width: 140rpx;
  font-size: 28rpx;
  color: #333;
}

input {
  flex: 1;
  height: 80rpx;
  border: 2rpx solid #eee;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.button-group {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.btn {
  width: 45%;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  border-radius: 44rpx;
  font-size: 32rpx;
}

.reset {
  background-color: #f5f5f5;
  color: #666;
}

.calculate {
  background-color: #ff6b00;
  color: #fff;
}

.result-area {
  background-color: #e9ecef;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 5rpx 5rpx -5rpx #ccc;
}

.result-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
}

.result-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.result-item {
  font-size: 28rpx;
  color: #333;
}

.value {
  color: #ffa237;
  font-weight: bold;
}

.calculation-time {
  font-size: 24rpx;
  color: #2E2E2E;
  margin-top: 20rpx;
}

.calculation-note {
  font-size: 24rpx;
  color: #333;
  margin-top: 20rpx;
  font-weight: bold;
}
</style> 